<template>
  <div class="order-content">
    <el-button @click="handleReturn">返回</el-button>
    <div class="order-header">
      <el-descriptions v-for="(item, index) in data.order" :key="item.order_id" class="margin-top" title="订单信息"
        :column="2" size="default" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              订单编号
            </div>
          </template>
          {{ item.order_id }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              下单时间
            </div>
          </template>
          {{ convertISOToCustomFormat(item.created_at) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              支付时间
            </div>
          </template>
          {{ }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              支付方式
            </div>
          </template>
          微信
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              支付状态
            </div>
          </template>
          <el-tag size="small">{{ item.status }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>

      <el-descriptions v-for="(item, index) in data.order" :key="item.order_id" class="margin-top" title="收货人信息"
        :column="2" size="default" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              姓名
            </div>
          </template>
          {{ item.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              电话
            </div>
          </template>
          {{ item.phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              收货地址
            </div>
          </template>
          {{ item.shipping_address }}
        </el-descriptions-item>

      </el-descriptions>

      <el-descriptions  class="margin-top " title="购物项信息" :column="5"
        size="default" direction="vertical" align="center" border>
        <template v-for="(item, index) in data.shopping" :key="index">
          <el-descriptions-item>

            <template #label>
              <div class="cell-item">
                序号
              </div>
            </template>
            {{ index }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                商品图片
              </div>
            </template>
            <img :src="item.product_image" width="60px" height="60px">
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                商品名称
              </div>
            </template>
            {{ item.product_name }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                价格/单价
              </div>
            </template>
            {{ item.unit_price }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                数量
              </div>
            </template>
            {{ item.quantity }}
          </el-descriptions-item>
        </template>

      </el-descriptions>

      <el-descriptions v-for="(item, index) in data.order" :key="item.order_id" class="margin-top" title="支付信息"
        :column="1" size="default" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              商品总金额
            </div>
          </template>
          {{ item.total_amount }}元
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              实际支付
            </div>
          </template>
          {{ item.total_amount }}元
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive } from 'vue';
import { GetOrderUseOrderId, GetOrderFromOrderId } from '../../api/order.js'
import convertISOToCustomFormat from '../../untils/convertTime.js'

// 获取订单编号
const porps = defineProps({
  order_id: String
})
const emits = defineEmits(['handleReturn'])

const data = reactive({
  order: [],
  shopping: []
})

console.log(porps.order_id);


onMounted(async () => {
  await GetOrderUseOrderId({
    order_id: porps.order_id
  }).then(res => {
    console.log(res);
    data.order = res.data
  })
  // 获取具体的商品
  await GetOrderFromOrderId({
    order_id: porps.order_id
  }).then(res => {
    console.log(res);
    data.shopping = res.data
  })
})


// 点击返回键，不展示组件
const handleReturn = () => {
  console.log(1);
  emits('handleReturn')
}

</script>

<style lang="less" scoped>
.order-content {
  padding: 10px;
  border: 1px solid #e0dbdb;
  border-radius: 5px;
  /* 圆角 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  /* 好看的阴影效果 */
  margin: 10px;
  height: auto;

}

.order-header {
  height: 100%;
  // overflow: auto;
  padding-bottom: 50px;

  .margin-top {
    margin-top: 30px;
  }

  .search,
  .search-user,
  .search-type {
    margin-right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .header-btn {
    display: flex;

    .search-btn {
      margin-right: 20px;
    }
  }
}

.user-middle-btn {
  margin: 10px 0px 10px 10px;
}
</style>